<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/zhenjxc.css" />
  <link rel="stylesheet" href="css/flex.css" />
  <link rel="stylesheet" href="css/swiper-bundle.min.css" />
</head>

<body style="  height: 100vh;width: 100vw; background:  #02133B; ">
  <div class="container">
    <div class="top">
      一村九园可视化管理镇级平台
      <div class="top_right flex aj-c ml-12">
        <img src="/image/num_xc/home.png" alt="">
        <div class="ml-12">返回主页</div>

      </div>

    </div>

    <div class="box s-b">
      <div class="box_left">
        <!-- 顶部标题 -->
        <div class="aj-c">
          <div class="left_xzzc aj-c">乡镇收入/支出</div>
        </div>
        <div class="flex  s-b mt-24">
          <div class="xzpayout_tab s-b aj-c ml-16 ">
            <div class="aj-c  mr-20 payouttab" onclick="xzpayout('zijin')">资金</div>
            <div class="aj-c  mr-20 payouttab" onclick="xzpayout('zichan')">资产</div>
            <div class="aj-c  mr-20 payouttab" onclick="xzpayout('ziyuan')">资源</div>
          </div>
          <div class="selecttimes  " style="position: relative;">
            <div class="select_box flex aj-c " onclick="payoutselectTime()">
              <div class="select_box_left"></div>
              <div class="select_box_title xzzc_payout aj-c line-clamp1"></div>
              <div class="select_box_right"></div>
            </div>
            <div class="selecttimesChild"></div>
          </div>
        </div>
        <!-- 收入支出的echarts -->
        <div class="xzzc_top_e">
        </div>
        <!-- 生态环境监测 -->
        <div class="aj-c mt-49 mb-30 flex">
          <div class="left_xzzc aj-c">生态环境监测</div>
        </div>
        <div class="xzzc_bottom_e  s-b ">
          <div class="aj-c xzzc_bottom_e_top s-b">
            <div class="j-c ">
              <div class="staijianc_noactive aj-c ml-16 sthjtab " onclick="sthj('shuiqs')"> 水情 </div>
              <div class="staijianc_noactive aj-c ml-16 sthjtab" onclick="sthj('yuqs')"> 雨情 </div>
              <div class="staijianc_noactive aj-c ml-16 sthjtab " onclick="sthj('turs')"> 土壤</br>pH值</div>
            </div>

            <div class="selecttimes  " style="position: relative;">
              <div class="select_box flex aj-c " onclick="shetjcpayoutselectTime()">
                <div class="select_box_left"></div>
                <div class="select_box_title sthj_payout aj-c line-clamp1"></div>
                <div class="select_box_right"></div>
              </div>
              <div class="shetjcselecttimesChild"></div>
            </div>
          </div>
        </div>
        <!-- 生态环境echarts -->
        <div class="shuiq">
        </div>
      </div>
      <div class="box_center">
        <!-- 地图区域 -->
        <div class="box_center_top  j-c s-b">
          <div class="s-b">
            <div class="box_center_top_box">
              <div class="box_center_top_left aj-c mb-30">
                <div class="">
                  <div class="aj-c num">186</div>
                  <div class="aj-c title">人口数量</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-30">
                <div class="">
                  <div class="aj-c num">186m²</div>
                  <div class="aj-c title">面积</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c  mb-30">
                <div class="">
                  <div class="aj-c num">186w</div>
                  <div class="aj-c title">支出</div>
                </div>
              </div>
              <div class="box_center_top_left aj-c mb-30 ">
                <div class="">
                  <div class="aj-c num">186w</div>
                  <div class="aj-c title">收入</div>
                </div>
              </div>
            </div>
            <!-- 地图echarts -->
            <div class="maps">

            </div>
            <div class="box_center_top_box">
              <div class=" box_center_top_left1 aj-c mb-30">
                <div class="">
                  <div class="aj-c num">1503kg</div>
                  <div class="aj-c title">预计产量</div>
                </div>
              </div>
              <div class=" box_center_top_left1 aj-c mb-30">
                <div class="">
                  <div class="aj-c num">1.5w</div>
                  <div class="aj-c title">投入成本</div>
                </div>
              </div>
              <div class=" box_center_top_left1 aj-c mb-30">
                <div class="">
                  <div class="aj-c num">50w</div>
                  <div class="aj-c title">预计收益</div>
                </div>
              </div>
              <div class=" box_center_top_left1 aj-c  mb-30">
                <div class="">
                  <div class="aj-c num">200</div>
                  <div class="aj-c title">销售订单数</div>
                </div>
              </div>


            </div>
          </div>
          <!-- 地图echarts -->
        </div>
        <!-- 疫情区域 -->
        <div class="box_center_center mt-20 ">
          <div class=" flex  mb-30 s-b">
            <div class="left_xzzc aj-c">网络化管理</div>

            <div class="selecttimes  ">
              <div class="select_box flex aj-c " onclick="wangghuaglselectTime()">
                <div class="select_box_left"></div>
                <div class="select_box_title wanggeh_payout aj-c line-clamp1">官路西村</div>
                <div class="select_box_right"></div>
              </div>
              <div class="wangghuaglselecttimesChild"></div>
            </div>
          </div>
          <div class="box_center_center_box flex s-b">
            <div class="bsyq mr-40 ">
              <div class="bsyq_item1 aj-c mb-40  ">本市疫情</div>
              <div class="bsyq_item1 aj-c mb-40  ">省内疫情</div>
              <div class="bsyq_item1 aj-c mb-40 ">国内疫情</div>
            </div>
            <div class=" yiqing s-b">
              <div class="gyxsje ">
              </div>
            </div>
          </div>

        </div>
        <!-- tab切换区域 -->
        <div class="j-c ml-75">
          <div class="box_center_bottom_item flex">
            <div class="bottom_item_bg aj-c xc" onclick="tabs('xc')">数字乡村</div>
            <div class="bottom_item_bg aj-c gy" onclick="tabs('gy')">数字果园</div>
            <div class="bottom_item_bg aj-c cy" onclick="tabs('cy')">数字菜园</div>
          </div>
        </div>
      </div>
      <div class="box_right">
        <div class="aj-c">
          <div class="left_xzzc aj-c">安防应急</div>
        </div>
        <div class="flex s-b mt-24 aj-c">
          <div class="box_right_tab s-b aj-c ml-16 ">
            <div class="aj-c   anfangyj mr-16  ">设备数量</div>
            <div class="aj-c   anfangyj mr-16  ">监控区域</div>
            <div class="aj-c   anfangyj mr-16  ">预警次数</div>
          </div>
          <div class="selecttimes  " style="position: relative">
            <div class="select_box flex aj-c " onclick="anfangyingjselectTime()">
              <div class="select_box_left"></div>
              <div class="select_box_title anfnagyjdizhi aj-c line-clamp1">官路西村</div>
              <div class="select_box_right"></div>
            </div>
            <div class="anfangyingjtimesChild"></div>
          </div>

        </div>
        <!-- 安防应急echarts -->
        <div class="box_right_top mt-24 s-b aj-c">

          <div class="box_right_top_quan">

          </div>
          <div class="box_right_top_list">
            <div class="flex s-b mt-18 box_right_top_list_item ">
              <div class="flex aj-c">
                <div class="border_id aj-c">1</div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">摄像头</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">50</div>
            </div>

            <div class="flex s-b mt-18 box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c">2</div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">红外灯</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">50</div>
            </div>

            <div class="flex s-b mt-18 box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c">3</div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">画面处理器</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">150</div>
            </div>
            <div class="flex s-b mt-18 box_right_top_list_item">
              <div class="flex aj-c">
                <div class="border_id aj-c">4</div>
                <div class="yjtitle ml-8 mr-20 line-clamp1">液晶监视器</div>
                <div class="yjicon"></div>
              </div>
              <div class="border_num">150</div>
            </div>
          </div>
        </div>
        <div class="aj-c mt-50">
          <div class="left_xzzc aj-c">党员网格</div>
        </div>
        <div class="f-end mt-30">
          <div class="selecttimes  " style="position: relative;">
            <div class="select_box flex aj-c " onclick="dangywgselectTime()">
              <div class="select_box_left"></div>
              <div class="select_box_title dyuanwg_payout aj-c line-clamp1">官路西村</div>
              <div class="select_box_right"></div>
            </div>
            <div class="dangywgselecttimesChild"></div>
          </div>
        </div>

        <div class="boix-tab mt-29">
          <div class="flex s-b h-38 mt-10" style="color: #A5B6D3;">
            <div class="aj-c" style=" width: 16%;">姓名</div>
            <div class="aj-c" style=" width: 16%;">行政区划</div>
            <div class="aj-c" style=" width: 16%;">职务</div>
            <div class="aj-c" style=" width: 16%;">电话</div>
            <div class="aj-c" style=" width: 16%;">户数</div>
            <div class="aj-c" style=" width: 16%;">人口</div>
          </div>
          <div class="flex s-b h-38 boix-tab_active">
            <div class="aj-c" style=" width: 16%;">萨拉米</div>
            <div class="aj-c" style=" width: 16%;">赵堤镇</div>
            <div class="aj-c" style=" width: 16%;">镇长</div>
            <div class="aj-c" style=" width: 16%;">18625357193</div>
            <div class="aj-c" style=" width: 16%;">1</div>
            <div class="aj-c" style=" width: 16%;">5</div>
          </div>
          <div class="flex s-b h-38  ">
            <div class="aj-c" style=" width: 16%;">萨拉米</div>
            <div class="aj-c" style=" width: 16%;">赵堤镇</div>
            <div class="aj-c" style=" width: 16%;">镇长</div>
            <div class="aj-c" style=" width: 16%;">18625357193</div>
            <div class="aj-c" style=" width: 16%;">1</div>
            <div class="aj-c" style=" width: 16%;">5</div>
          </div>
          <div class="flex s-b h-38 boix-tab_active">
            <div class="aj-c" style=" width: 16%;">萨拉米</div>
            <div class="aj-c" style=" width: 16%;">赵堤镇</div>
            <div class="aj-c" style=" width: 16%;">镇长</div>
            <div class="aj-c" style=" width: 16%;">18625357193</div>
            <div class="aj-c" style=" width: 16%;">1</div>
            <div class="aj-c" style=" width: 16%;">5</div>
          </div>
          <div class="flex s-b h-38  ">
            <div class="aj-c" style=" width: 16%;">萨拉米</div>
            <div class="aj-c" style=" width: 16%;">赵堤镇</div>
            <div class="aj-c" style=" width: 16%;">镇长</div>
            <div class="aj-c" style=" width: 16%;">18625357193</div>
            <div class="aj-c" style=" width: 16%;">1</div>
            <div class="aj-c" style=" width: 16%;">5</div>
          </div>
        </div>

        <!-- 脱贫  检测户 低保家庭等 -->
        <div class="flex f-wrap s-b mt-27 ggtpbank">

        </div>
        <!-- 巩固脱贫echarts -->
        <div class="mt-24 ggecharts"></div>
      </div>
    </div>
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/swiper-bundle.min.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script type="text/javascript" src="js/geoCitys.js"></script>
  <script src="layui/layui.js"></script>
  <script src="js/zhenjixc.js"></script>
  <script>
    var payoutindex = 0;//乡镇收入支出点击的tab
    var payoutname = '官路西村';//乡镇收入支出点击的地名
    // 乡镇支出的地名下拉(全局使用)
    var selectindex = 0;
    // 生态环境tab
    var sthjtabindex = 0;
    var sthjtabname = '官路西村';
    //map的左侧的默认点击
    mapleftindex = 0;
    //map的右侧的默认点击
    maprightindex = '-1';
    // 网格话管理的点击的是那个tab的索引 默认是第一个
    var wangghuagl = 0;
    var wangghuaglname = '官路西村';

    // 安防应急
    var anfnagyjindex = 0;
    var anfnagyjname = '官路西村';



    (function () {
      document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active';
      document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy ';
      document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
      // document.getElementsByClassName('yds')[0].className = 'aj-c  mr-30 yds yds_item_active';

    })();
    // / 乡镇收入支出的初始化    
    (function changedocu() {
      document.getElementsByClassName('xzzc_payout')[0].innerHTML = '官路西村';
      document.querySelectorAll('.payouttab')[0].className = 'aj-c  mr-20 payouttab bsyq_item_active'
      payoutrequest()
    })()
    // 乡镇收入支出的tab
    function xzpayout(value) {
      let payoutliat = document.querySelectorAll('.payouttab');
      payoutliat.forEach((item, index) => {
        item.className = 'aj-c  mr-20 payouttab'
      })
      switch (value) {
        case 'zijin':
          payoutliat[0].className = 'aj-c  mr-20 payouttab bsyq_item_active'
          payoutindex = 0;
          payoutrequest()
          break;
        case 'zichan':
          payoutliat[1].className = 'aj-c  mr-20 payouttab bsyq_item_active'
          payoutindex = 1;
          payoutrequest()
          break;
        case 'ziyuan':
          payoutliat[2].className = 'aj-c  mr-20 payouttab bsyq_item_active'
          payoutindex = 2;
          payoutrequest();
          break;
        default:
          break;
      }
    }
    // 点击右侧的乡镇收入支出
    function payoutselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('selecttimesChild')[0].innerHTML = ` 
      <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="payoutcselect_payout(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('selecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }
    // 乡镇收入支出地区下拉选中
    function payoutcselect_payout(e) {
      let changetime = e.target.outerText;//选择的下拉时间
      document.getElementsByClassName('selecttimesChild')[0].innerHTML = '';
      document.getElementsByClassName('sthj_payout')[0].innerHTML = changetime;
      selectindex = 0;
      payoutname = changetime;
      payoutrequest();
    }
    // 请求结果
    function payoutrequest() {
      xzzc_top_e([6000, 6000, 6000, 6000, 6000, 5000], [1012, 1230, 1790, 2349, 1654, 1230])
    }


    // -----------------------------生态环境区域--------------------------------------------------------
    // 生态环境监测的初始化 
    shethjonce();
    function shethjonce() {
      document.getElementsByClassName('sthj_payout')[0].innerHTML = '官路西村';
      document.querySelectorAll('.sthjtab')[0].className = 'staijianc_noactive aj-c ml-16 sthjtab staijianc_active'
      staihjpayoutrequest()
    }

    // 生态环境监测tab切换
    function sthj(value) {
      let sthjtab = document.querySelectorAll('.sthjtab');
      sthjtab.forEach((item, index) => {
        item.className = 'staijianc_noactive aj-c ml-16 sthjtab'
      })
      switch (value) {
        case 'shuiqs':
          sthjtab[0].className = ' staijianc_noactive aj-c ml-16 sthjtab staijianc_active'
          sthjtabindex = 0;
          staihjpayoutrequest()
          break;
        case 'yuqs':
          sthjtab[1].className = 'staijianc_noactive aj-c ml-16 sthjtab staijianc_active'
          sthjtabindex = 1;
          staihjpayoutrequest()
          break;
        case 'turs':
          sthjtab[2].className = 'staijianc_noactive aj-c ml-16 sthjtab staijianc_active'
          sthjtabindex = 2;
          staihjpayoutrequest();
          break;
        default:
          break;
      }
    }
    // 点击右侧的地址生态环境监测
    function shetjcpayoutselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('shetjcselecttimesChild')[0].innerHTML = ` 
      <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="shetjcselect_payout(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('shetjcselecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }
    // 地区下拉选中
    function shetjcselect_payout(e) {
      let changetime = e.target.outerText;//选择的下拉时间
      document.getElementsByClassName('shetjcselecttimesChild')[0].innerHTML = '';
      document.getElementsByClassName('sthj_payout')[0].innerHTML = changetime;
      selectindex = 0;
      payoutname = changetime;
      payoutrequest();
    }

    // 生态环境请求结果
    function staihjpayoutrequest() {
      shuiq([130, 240, 230, 240, 1030])

    }
    // ----------------------------------------------地图区域-----------------------------------------------
    // 地图点击区域
    // 左边点击
    // 初始化地图点击
    document.querySelectorAll('.box_center_top_left')[0].className = ' box_center_top_left aj-c mb-30 box_center_top_left_active'
    mapsrequest();
    $('.box_center_top_left').click(function () {
      // 点击左边吧右边的清楚
      document.querySelectorAll('.box_center_top_left1').forEach((item, index, arr) => {
        console.log(item, 'udhfueiw')
        item.className = ' box_center_top_left1  aj-c mb-30'
      });
      maprightindex = '-1';
      mapleftindex = $(this).index();
      let arrdom = document.querySelectorAll('.box_center_top_left');
      arrdom.forEach((item, index, arr) => {
        item.className = ' box_center_top_left  aj-c mb-30'
      })
      arrdom[mapleftindex].className = 'box_center_top_left aj-c mb-30 box_center_top_left_active';
      mapsrequest()

    });
    // 右边点击
    $('.box_center_top_left1').click(function () {
      // 点击右边吧左边的清楚 
      document.querySelectorAll('.box_center_top_left').forEach((item, index, arr) => {
        console.log(item, 'udhfueiw')
        item.className = ' box_center_top_left  aj-c mb-30'
      })
      mapleftindex = '-1';
      maprightindex = $(this).index();
      let arrdom = document.querySelectorAll('.box_center_top_left1');
      arrdom.forEach((item, index, arr) => {
        console.log(item, 'udhfueiw')
        item.className = ' box_center_top_left1  aj-c mb-30'
      });

      arrdom[maprightindex].className = 'box_center_top_left1 aj-c mb-30 box_center_top_left_active';
      mapsrequest()

    });
    function mapsrequest() {
      let indexnums = maprightindex == '-1' ? mapleftindex : maprightindex;
      maps()
    }

    // -----------------------------网格化管理--------------------------------------
    // 市区疫情区域初始化选中第一个

    document.getElementsByClassName('bsyq_item1')[0].className = 'bsyq_item1 aj-c mb-40   bsyq_item_active'
    wgehuarequest();//初始化调用网格话管理的接口
    $('.bsyq_item1').click(function () {
      document.querySelectorAll('.bsyq_item1').forEach((item, index) => {
        item.className = 'bsyq_item1 aj-c mb-40 '
      })
      wangghuagl = $(this).index();

      document.getElementsByClassName('bsyq_item1')[wangghuagl].className = 'bsyq_item1 aj-c mb-40   bsyq_item_active'
      wgehuarequest()
    })
    // 点击网格话管理的下拉地址
    function wangghuaglselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('wangghuaglselecttimesChild')[0].innerHTML = ` 
      <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="wangghgl_time(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('wangghuaglselecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }

    // 网格话管理地区下拉选中
    function wangghgl_time(e) {
      let changetime = e.target.outerText;//选择的下拉时间
      document.getElementsByClassName('wangghuaglselecttimesChild')[0].innerHTML = '';
      document.getElementsByClassName('wanggeh_payout')[0].innerHTML = changetime;
      selectindex = 0;
      wangghuaglname = changetime;
      wgehuarequest();
    }
    function wgehuarequest() {
      switch (wangghuagl) {
        // 本市疫情
        case 0:
          gyxsje(["1组", "2组", "3组", "4组", "5组",], [34, 35, 35, 35, 27, 13, 24, 36, 14, 23, 53, 63])

          break;
        // 省内疫情

        case 1:
          gyxsje(["1组", "2组", "3组", "4组", "5组",], [34, 35, 25, 15, 67, 13, 14, 26, 34, 23, 23, 63])

          break;
        // 国内疫情

        case 2:
          gyxsje(["1组", "2组", "3组", "4组", "5组",], [134, 25, 45, 35, 27, 33, 24, 46, 34, 23, 23, 63])


          break;

        default:
          break;
      }


    }
    //-------------------------------- 安防应急区域------------------------------
    // 初始化安防应急
    document.getElementsByClassName('anfangyj')[anfnagyjindex].className = 'aj-c mr-16   anfangyj bsyq_item_active w-109  h-47'
    document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';

    anfnagyingjrrequest();
    $('.anfangyj').click(function () {
      document.querySelectorAll('.anfangyj').forEach((item, index) => {
        item.className = 'aj-c mr-16  anfangyj  w-109  h-47'
      })
      anfnagyjindex = $(this).index();
      console.log(anfnagyjindex)
      // 点击那个选中那个tab
      document.getElementsByClassName('anfangyj')[anfnagyjindex].className = 'aj-c mr-16   anfangyj bsyq_item_active w-109  h-47'
      // echarts右边的列表默认选中第一个 
      document.querySelectorAll('.box_right_top_list_item').forEach((item, index, arr) => {
        item.className = 'flex s-b mt-18 box_right_top_list_item'
      })
      document.querySelectorAll('.box_right_top_list_item')[0].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';

      anfnagyingjrrequest();

    })
    function anfnagyingjrrequest() {
      box_right_top_quan(0, document.querySelectorAll('.box_right_top_list_item').length, '浦东街镇0', '11.0%', '-1');//点击的索引，一共的长度

    }
    // 选择安防应急的列表  

    $('.box_right_top_list_item').click(function () {
      console.log('bdueiwdbig')
      let index = $(this).index();
      var arrdom = document.querySelectorAll('.box_right_top_list_item');

      arrdom.forEach((item, index, arr) => {
        item.className = 'flex s-b mt-18 box_right_top_list_item'
      })
      document.querySelectorAll('.box_right_top_list_item')[index].className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active';
      switch (index) {
        case 0:
          box_right_top_quan(index, arrdom.length, '浦东街镇0', '11.0%');//点击的索引，一共的长度 
          break;
        case 1:
          box_right_top_quan(index, arrdom.length, '浦东街镇1', '20%');//点击的索引，一共的长度 
          break;
        case 2:
          box_right_top_quan(index, arrdom.length, '浦东街镇2', '30%');//点击的索引，一共的长度 
          break;
        case 3:
          box_right_top_quan(index, arrdom.length, '浦东街镇3', '50%');//点击的索引，一共的长度 
          break;

        default:
          break;
      }
    });

    // 点击a安防应急的下拉地址
    function anfangyingjselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('anfangyingjtimesChild')[0].innerHTML = ` 
      <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="anfnagyingj_time(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('anfangyingjtimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }
    //安防应急地区下拉选中
    function anfnagyingj_time(e) {
      let changetime = e.target.outerText;//选择的下拉时间
      document.getElementsByClassName('anfangyingjtimesChild')[0].innerHTML = '';
      document.getElementsByClassName('anfnagyjdizhi')[0].innerHTML = changetime;
      selectindex = 0;
      wangghuaglname = changetime;
      wgehuarequest();
    }


    function tabs(value) {
      switch (value) {
        case 'cy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc'
          top.location = './zhenjicy.html'

          break;
        case 'gy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy  ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy box_center_bottom_item_active'
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc'
          top.location = './zhenjigy.html'

          break;
        case 'xc':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active'
          top.location = './zhenjixc.html'
          break;

        default:
          break;
      }
    }
    //  党员网格
    // 点击党员网格的下拉地址
    function dangywgselectTime() {
      selectindex++;
      if (selectindex == 1) {
        document.getElementsByClassName('dangywgselecttimesChild')[0].innerHTML = ` 
      <div class=""    style="border: 0.1rem solid #00ceff;border-bottom:0; width: 5.8rem;position: absolute;z-index: 999;background-color: #02184A; "
             onclick="dangyuanwg_time(event)">
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村1</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村2</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村3</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村4</div>
        <div class="aj-c" style="height:30px ;color:#00CEFF;border-bottom:1px solid #00CEFF">官路西村</div>
        </div> 
      `
      } else {
        document.getElementsByClassName('dangywgselecttimesChild')[0].innerHTML = ` `
        selectindex = 0;
      }
    }

    //党员网格地区下拉选中
    function dangyuanwg_time(e) {
      let changetime = e.target.outerText;//选择的下拉时间
      document.getElementsByClassName('dangywgselecttimesChild')[0].innerHTML = '';
      document.getElementsByClassName('dyuanwg_payout')[0].innerHTML = changetime;
      selectindex = 0;
      wangghuaglname = changetime;
      dangyuanwgrequest();
    }
    // 党员网格下拉
    function dangyuanwgrequest() {
      document.getElementsByClassName('boix-tab')[0].innerHTML = `
          <div class="flex s-b h-38 mt-10" style="color: #A5B6D3;">
            <div class="aj-c" style=" width: 16%;">姓名</div>
            <div class="aj-c" style=" width: 16%;">行政区划</div>
            <div class="aj-c" style=" width: 16%;">职务</div>
            <div class="aj-c" style=" width: 16%;">电话</div>
            <div class="aj-c" style=" width: 16%;">户数</div>
            <div class="aj-c" style=" width: 16%;">人口</div>
          </div>
          <div class="flex s-b h-38 boix-tab_active">
            <div class="aj-c" style=" width: 16%;">萨拉米</div>
            <div class="aj-c" style=" width: 16%;">赵堤镇</div>
            <div class="aj-c" style=" width: 16%;">镇长</div>
            <div class="aj-c" style=" width: 16%;">18625357193</div>
            <div class="aj-c" style=" width: 16%;">1</div>
            <div class="aj-c" style=" width: 16%;">5</div>
          </div>
          <div class="flex s-b h-38  ">
            <div class="aj-c" style=" width: 16%;">萨拉米</div>
            <div class="aj-c" style=" width: 16%;">赵堤镇</div>
            <div class="aj-c" style=" width: 16%;">镇长</div>
            <div class="aj-c" style=" width: 16%;">18625357193</div>
            <div class="aj-c" style=" width: 16%;">1</div>
            <div class="aj-c" style=" width: 16%;">5</div>
          </div> 
        `
    }




  </script>



  <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->


  <!-- 先引入jquery -->

  <script>
    var swiper = new Swiper(".mySwiper", {
      watchSlidesProgress: true,
      slidesPerView: 3,
    });
  </script>

</body>

</html>